<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    <title>极客X浏览器</title>
    <link rel="stylesheet" href="./asset/layui/css/layui.css">
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      .frame { 
        width: 100%; 
        border: 0; 
        height: calc(100vh - 42px);
      }
      #address { }
      .address-hit { background-color: #a2ffa2; }
    </style>
  </head>
  <body>
    <div class="layui-form layui-form-pane">
      <!-- <input type="text" id="address" value="https://www.gxela.gov.cn/app/index/index/Index/showIndex.do?" /> -->
      <!-- <input type="text" id="address" value="https://ptce.gx12333.net/" /> -->
      <!-- <input type="text" id="address" value="https://www.gxgj.com/" /> -->
      <div class="layui-form-item" style="margin-bottom: 0;">
        <label class="layui-form-label">网址：</label>
        <div class="layui-input-block">
          <input type="text" id="address" value="https://www.gxgj.com/cate/79" 
          placeholder="输入网址并回车" autocomplete="off" lay-options="{trigger: 'input'}"
          class="layui-input">
        </div>
      </div>
      <!-- <button onclick="gotoUrl()" id="btn-run">转到</button> -->
    </div>
    <iframe class="frame" id="iframe1" src="https://xn--dpqw2zp3gcs5a.cn/images/index.html?v=1.0.0"></iframe>
    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
    <script src="./asset/layui/layui.js"></script>
  </body>
</html>

<script>

  // 匹配管理   key是各目标简称，identity用来用indexOf网址匹配
  targets = {
    'ganbu'  : { identify : 'www.gxela.gov.cn'},
    // 'gongxu' : { identify : 'ptce.gx12333.net'},
  }
  localUrl = 'http://127.0.0.1:65526';

  $ = layui.$;
  iframe1 = document.getElementById("iframe1")
  $address = $("#address")

  // 接受到来自主进程的onOpenUrl事件 // 通常是主进程拦截到渲染进程弹出新窗口的情况 // TODO 如果将来开发了打开新标签的能力，就创建另一个事件函数
  // 注意，这个主要用来拦截弹出窗口
  window.electronAPI.onOpenUrl((url) => {
    $address.val(url)
    gotoUrl()
  })

  hackingPage = () => {
    console.log('hackingPage checking...')
    let url = iframe1.contentWindow.window.document.location.href;
    // 状态机 /////////////////////////
    // ganbu视频列表页面 // 这个页面有多个视频的链接，可以做激活（第一次学习就是激活）和学习的操作，并且可以去刷新以执行下一条
    if(url.indexOf('https://www.gxela.gov.cn/app/tms/trainclass/Trainclass/addtcuser.do')==0){
      console.log('hacking ganbu video list')
      // 查找页面中“未开始”和“进行中”的按钮中的第一个，然后针对它对应的视频间隔做进度提交(如果还未开始就先注入启动脚本)
      // 这个工作由注入脚本做（优选），也可以在这里用原生js写
      injectJs('/target/ganbu/startlesson.js')
    }
  }

  // 绑定网址输入框
  layui.dropdown.render({
    elem: '#address',
    id: 'address-dropdown',
    data: [{
        title: 'https://www.gxela.gov.cn/',
        id: 101
      },{
        title: 'https://ptce.gx12333.net/',
        id: 102
      }
      ,{
        title: 'https://www.baidu.com/',
        id: 103
      }
      // ,{
      //   title: 'https://www.gxgj.com/cate/79',
      //   id: 104
      // }
    ],
    click: function(obj){
      this.elem.val(obj.title);
      gotoUrl()
    },
    // style: 'min-width: 235px;'
  });


  // 用事件监听目标网页跳转并更新地址栏、检查状态
  // iframe支持的事件列表同Window对象：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/load_event  
  // 但是！以下测试只发现load事件有效！
  iframe1.addEventListener('load', (e) => {
    addressCheck()
    updateAddress()
    hackingPage()
  })
  iframe1.addEventListener('unload', (e) => { //无效
    console.log('iframe1.unload', e)
  })
  iframe1.addEventListener('hashchange', (e) => { //无效
    console.log('iframe1.hashchange', e)
  })
  iframe1.addEventListener('pagehide', (e) => { //无效
    console.log('iframe1.pagehide', e)
  })
  iframe1.addEventListener('pageshow', (e) => { //无效
    console.log('iframe1.pageshow', e)
  })

  // 以下代码不能持续监听，用上面的iframe1.onload
  // 通过iframe1.contentWindow.addEventListener 注入的事件是绑定到打开的document实体中的，
  // 所以一旦重新打开url，document首先会被销毁重建，注入的事件自然就无效了
  /**
  iframe1.contentWindow.addEventListener('DOMContentLoaded', function(e) {
    console.log('iframe1 DOMContentLoaded', e)
    try {
      if (iframe1.contentWindow.document.readyState === "interactive") {
        iframe1.addEventListener("load", function(e) {
          console.log(iframe1.contentWindow.location.href)// 拿到iframe内部最新的href
        });
      }
    } catch (err) {}
  },false);
  // 监听滚动
  iframe1.contentWindow.addEventListener("scroll",(e)=>{
    console.log('iframe1 scroll', e)
  },false)
  */
  

  test1 = () => {
    
    // 测试修改框架里面的dom
    // a = document.getElementById("iframe1")
    // b = a.contentWindow.document.getElementById("nav")
    // b.remove()

  }

  injectJs = (jsUrl) => {
    var script = document.createElement('script');
    script.src = localUrl + jsUrl;
    iframe1.contentWindow.document.head.appendChild(script);
  }

  // 地址栏回车转到
  $address.keypress(function (even) {
    if (even.which == 13) {
      layui.dropdown.close('address-dropdown')
      gotoUrl()
    }
  });

  // 跳转到地址栏指定的页面
  gotoUrl = () => {
    // 打开网址
    var address = $address.val();
    if(address.indexOf('http')==-1) {
      address = 'http://' + address
    }
    iframe1.setAttribute("src", address)
    addressCheck()
  }

  // 显示地址栏和提示效果
  addressCheck = () => {
    let res = target_check()
    if( res ){
      $address.addClass('address-hit').attr("title", `识别可自动播放的页面（${res}），详见操作说明→ `)
    } else {
      $address.removeClass('address-hit').attr("title", '')
    }
  }

  // 是否是目标的检测，返回识别到的目标简称
  target_check = () => {
    let is;
    let address = $address.val();
    for (const key in targets) {
      const tgt = targets[key];
      if(address.indexOf(tgt.identify)>0) {
        return key;
      }
    }
    return false;
  }

  // 获取当前页面地址并回填到地址栏
  updateAddress = () => {
    $address.val(iframe1.contentWindow.document.location.href)
  }


</script>